<template>
    <div id="cart">
        <nav-bar  class="nav-bar">
          <div slot="center">购物车( {{cartListLength}} )</div>
        </nav-bar>
        <scroll :probe-type="2"
            class="content"
            ref="cartscroll">
          <cart-list></cart-list>
        </scroll>
    </div>
</template>



<script>
  import scroll from "components/common/scroll/Scroll"
  import NavBar from "components/common/navbar/NavBar"
  import cartList from "views/cart/components/cartList"

export default {
  name: 'cart',
  components:{
    scroll,
    NavBar,
    cartList
  },
  computed:{
    cartListLength (){
      return  this.$store.state.cartList.length
    } 
  },
  activated(){
    //this.$refs.cartscroll.scrool.refresh();
    this.$refs.cartscroll.getrefresh;
  }
  // watch:{
  //   cartListLength(){
  //     setTimeout(function(){
  //       //this.$refs.cartscroll.getrefresh().apply();
  //       console.log(this.$refs.cartscroll);
  //     },1500)
  //   }
  // }
  // activated() {
  //   this.$refs.scroll.scroll.refresh();
  // }
}
</script>

<style scoped>
  #cart {
    height: 100vh;
  }
  .nav-bar{
    background: pink;
    color: white;
    flex: 1;
  }
  .content {
    height: calc(100% - 93px);
    width: calc(100%);
    overflow: hidden;
  }
</style>